<!--
 * @Description: 素材列表页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-30 18:01:33
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-07 20:32:40
 -->
<template>
  <div class="app-container">
    <eHeader :query="query"/>
    <div style="width:100%;height:20px" />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="article">
        <span slot="label" class="pane-style"><i class="el-icon-link" /> 文章素材</span>
        <ul class="public-ul">
          <li v-for="(item, index) in data" :key="index">
            <div class="public-main">
              <div class="public-head" />
              <div class="public-con">
                <div class="el-m-card">
                  <div class="art-title"> {{ item.title }} </div>
                  <div>
                    <img :src="item.thumbnail" class="art-image">
                    <div class="art-desc">
                      {{ item.description }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="public-foot">
                <div class="col-md10">
                  <span class="marginRight6">新增人:  {{ item.name }}  </span> <span>新增时间：<span>{{ item.created_at }}</span> </span>
                </div>
                <div class="col-md2 textRight displayFlex">
                  <span class="editthumb">
                    <edit :data="item" :sup_this="sup_this" />
                  </span>
                  &nbsp;
                  <!-- <span class="deletethumb">
                    <i class="el-icon-delete" style="font-size: 20px;" @click="subDelete(item.id)" />
                  </span> -->
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane name="picture">
        <span slot="label" class="pane-style"><i class="el-icon-picture" /> 图片素材</span>
        <ul class="public-ul">
          <li v-for="(item, index) in data" :key="index">
            <div class="public-main">
              <div class="public-head"> {{ item.title }} </div>
              <div class="public-con">
                <img :src="item.content" class="tupian">
              </div>
              <div class="public-foot">
                <div class="col-md10">
                  <span class="marginRight6">新增人:  {{ item.name }}  </span> <span>新增时间：<span>{{ item.created_at }}</span> </span>
                </div>
                <div class="col-md2 textRight displayFlex">
                  <span class="editthumb">
                    <edit :data="item" :sup_this="sup_this" />
                  </span>
                  &nbsp;
                  <span class="deletethumb" data-id="970">
                    <i class="el-icon-delete" style="font-size: 19px;" @click="subDelete(item.id)" />
                  </span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane name="video">
        <span slot="label" class="pane-style"><i class="el-icon-video-camera" /> 视频素材</span>
        <ul class="public-ul">
          <li v-for="(item, index) in data" :key="index">
            <div class="public-main">
              <div class="public-head"> {{ item.title }} </div>
              <div class="public-con">
                <video controls="controls" class="shipin-video"> <source :src="item.content"></video>
              </div>
              <div class="public-foot">
                <div class="col-md10">
                  <span class="marginRight6">新增人:  {{ item.name }}  </span> <span>新增时间：<span>{{ item.created_at }}</span> </span>
                </div>
                <div class="col-md2 textRight displayFlex">
                  <span class="editthumb">
                    <edit :data="item" :sup_this="sup_this" />
                  </span>
                  &nbsp;
                  <span class="deletethumb">
                    <i class="el-icon-delete" style="font-size: 19px;" @click="subDelete(item.id)" />
                  </span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <!--分页组件-->
    <!-- <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/> -->
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import { confirmBox } from "@/utils/message"
import eHeader from './module/header'
import edit from './module/edit'

export default {
  components: { eHeader, edit },
  mixins: [initData],
  data() {
    return {
      sup_this: this,
      activeName: 'article'
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
      this.url = '/admin/v1/material'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort, type: this.activeName }
      return true
    },
    handleClick() {
      this.init()
    },
    subDelete(id) {
      confirmBox("素材信息").then(() => {
        this.$api.material.material
          .del(id)
          .then(res => {
            this.init()
            this.$notify({ title: '删除成功', type: 'success', duration: 2500 })
          }).catch(err => {
            console.log(err.response.data.message)
          })
      })
    }
  }
}
</script>

<style scoped>
.pane-style {
  font-weight: 600;
  font-size: 16px;
  padding: 15px;
  /* display: block; */
}

.public-ul li {
  float: left;
  margin-right: 40px;
}

li {
  list-style: none;
}
.public-main {
    /* width: 364px; */
}
.public-head, .public-foot {
    color: #7B8190;
}
.public-head, .public-foot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-head, .public-foot {
  font-size: 13px;
  padding: 6px 0;
}
.public-con {
  width: 100%;
  height: 212px;
  border: 1px solid #afb3bd;
  position: relative;
  padding: 40px 60px;
}
.col-md10 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 82%;
  float: left;
  line-height: 24px;
}
.displayFlex {
  display: flex;
  justify-content: flex-end;
}
.textRight {
  text-align: right !important;
}
.col-md2 {
  width: 16.66666667%;
}
.el-card__body {
  padding: 10px;
  overflow: hidden;
}
.art-title {
  line-height: 30px;
  color: #7B8190;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.art-desc {
  width: 140px;
  margin-left: 10px;
  line-height: 20px;
  float: left;
  font-size: 12px;
  color: #666;
  height: 60px;
  overflow: hidden;
}
.art-image {
  width: 60px;
  float: left;
}
.el-m-card.is-always-shadow, .el-m-card.is-hover-shadow:focus, .el-m-card.is-hover-shadow:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.el-m-card {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    max-width: 250px;
    max-height: 116px;
}

.el-m-card, .el-message {
    border-radius: 4px;
    overflow: hidden;
    padding: 10px;
}

.tupian {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 250px;
    max-height: 166px;
}
.shipin-video {
    width: 294px;
    height: 200px;
    margin: 0 auto;
}

.shipin-video {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 270px;
    height: 156px;
    margin: 0 auto;
}
</style>
